<template>
  <el-container>
    <!-- 查询条件区域，这里可根据实际需求添加查询表单 -->
    <el-header class="flex-cl" height="40px">
      状态:&nbsp;
      <el-radio-group v-model="state.query.status">
        <el-radio label="未上传" :value="0"></el-radio>
        <el-radio label="已上传" :value="1"></el-radio>
      </el-radio-group>
      &nbsp; &nbsp; &nbsp;
      <!-- <el-button size="small" type="primary" @click="uploadData">上传</el-button> -->
      <el-button size="small" type="primary" @click="loadStock">刷新</el-button>
    </el-header>
    <el-main>
      <el-table :data="state.tableData.data" stripe border height="100%">
        <el-table-column prop="line" label="产线">
          <template #default="scope">
            {{ getLineName(scope.row.line) }}
          </template>
        </el-table-column>
        <el-table-column prop="model" label="型号">
          <template #default="scope">
            {{ getProductName(scope.row.product, scope.row.model) }}
          </template>
        </el-table-column>
        <el-table-column prop="sn" label="序列号">
          <template #default="scope">
            {{ scope.row.sn }}
            <el-popover v-if="scope.row.child" width="250" title="" content="" trigger="hover" placement="right">
              <template #reference>
                <el-button size="small" type="primary" :icon="Document" plain circle></el-button>
              </template>
              <template #default>
                <ul>
                  <li v-for="item in scope.row.child">{{ item.sn }}</li>
                </ul>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="create_at" label="日期">
          <template #default="scope">
            {{ decodeUnix(scope.row.create_at) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === 0 ? 'danger' : 'success'">
              {{ { 0: '未上传', 1: '已上传' }[scope.row.status] }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer class="flex-cl" height="45px">
      <el-pagination background :total="state.tableData.count || 0" :page-size="state.query.row"
        :page-sizes="[20, 40, 60, 80, 100]" layout="total, sizes, prev, pager, next, jumper" @current-change="loadStock"
        @size-change="loadStock"></el-pagination>
    </el-footer>
  </el-container>
</template>

<script setup>
import { reactive } from 'vue';
import { LoadStock, UploadStock } from '#/go/server/Handler';
import { decodeUnix } from '@/util/index.js'
import { Document } from '@element-plus/icons-vue'

const props = defineProps({
  line: {
    type: Array,
    default: () => []
  },
  product: {
    type: Array,
    default: () => []
  }
})

const getLineName = (lineId) => {
  return props.line.find(line => line.id === lineId)?.name || '未知产线';
}

const getProductName = (productId, modelId) => {
  const product = props.product.find(product => product.id === productId);
  if (product) {
    const model = product.model.find(model => model.id === modelId);
    return model ? `${product.name} - ${model.name}` : product.name;
  }
  return '未知产品';
}

const state = reactive({
  query: {
    page: 1,
    row: 20,
    status: 0
  },
  tableData: {
    data: [],
  }
})

const loadStock = () => {
  LoadStock(state.query.page, state.query.row, state.query.status).then(res => {
    console.log(res)
    state.tableData = res
  })
}

const uploadData = () => {
  UploadStock().then(loadStock)
}

// onMounted(loadStock);
</script>